<template>
	<view class="login_box">
		<view class="content_box">
			<view class="login_title">
				登录
			</view>
			<view class="flex">
				<view class="possword_box" v-for="(item,index) in loginList" :key="index" @click="onActive(index)">
					<view :class="[listIndex == index? 'possword_txt_active' : 'possword_txt']">
						{{item.name}}
					</view>
					<view class="xian" v-if="listIndex == index"></view>
				</view>
			</view>
			<!-- <view class="possword_ipt_box" v-if="listIndex == 0">
				<input class="uni-input" type="text" placeholder="请输入手机号" />
				<input class="uni-input_possword" password type="text" placeholder="请输入登录密码" />
			</view> -->
			<view class="weixin_login" v-if="listIndex == 0">
				<uni-icons type="weixin" color="#02dc6b" size="60"></uni-icons>
			</view>
			<view class="posi">
				<view class="login_btn" @click="Login(loginTxt)">
					{{loginTxt}}
				</view>
				<!-- <view class="wj_ks flexjus">
					<view class="wj_txt">
						忘记密码？
					</view>
					<view class="ks_txt">
						快速注册
					</view>
				</view> -->
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listIndex: 0,
				loginTxt: '微信授权',
				loginList: [
					{
						name: '微信登录'
					}
				],
				loginCode: {}
			}
		},
		methods: {
			onActive(ind) {
				this.listIndex = ind
				if (this.listIndex == 0) {
					this.loginTxt = '登录'
				} else {
					this.loginTxt = '微信授权'
				}
			},
			Login(type) {
				let that = this
				if (type == "微信授权") {
					uni.showLoading({
						title: '授权中'
					});
					that.loagin()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.login_box {
		overflow: hidden;

		.content_box {
			padding-left: 32upx;
			padding-right: 32upx;
			margin-top: 340upx;

			.login_title {
				font-size: 52upx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.possword_box {
				width: 180upx;
				margin-top: 104upx;
				margin-right: 60upx;

				.possword_txt {
					font-size: 36upx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					text-align: center;
				}

				.possword_txt_active {
					font-size: 36upx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #EBBE87;
					text-align: center;
				}

				.xian {
					width: 56upx;
					height: 6upx;
					background: #EBBE87;
					margin: 14upx auto;
					border-radius: 16upx;
				}
			}

			.possword_ipt_box {
				margin-top: 100upx;

				.uni-input {
					width: 658upx;
					border-bottom: 2upx solid #E4E4E4;
					padding-bottom: 26upx;
				}

				.uni-input_possword {
					width: 658upx;
					border-bottom: 2upx solid #E4E4E4;
					padding-bottom: 26upx;
					margin-top: 88upx;
				}
			}

			.weixin_login {
				margin-top: 172upx;
				text-align: center;

				.weixin_txt {
					font-size: 36upx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			.posi {
				position: fixed;
				bottom: 398upx;

				.login_btn {
					width: 686upx;
					height: 88upx;
					background: #EBBE87;
					border-radius: 40upx;
					font-size: 36upx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 88upx;
					text-align: center;
					position: absolute;
				}

				.wj_ks {
					margin-top: 40upx;

					.wj_txt {
						font-size: 32upx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
					}

					.ks_txt {
						font-size: 32upx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #EBBE87;
					}
				}
			}
		}
	}
</style>
